<template>
  <div>
    <el-dialog title="编辑权限" :visible.sync="dialogFormVisible" :before-close="close">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="权限名称：" :label-width="formLabelWidth">
              <el-input v-model="form.powerName" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="权限菜单：" :label-width="formLabelWidth">
            <el-checkbox-group v-model="menuId" @change="powerMenuList">
              <el-checkbox
                v-for="item of checkVal"
                :key="item.powerName"
                :label="item.powerCode"
              >{{ item.powerName }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button type="primary" size="small" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addPower } from '@/api/power'
import { allChinese } from '@/utils/validate.js'
export default {
  name: 'ModifyPower',
  props: {
    modifyPower: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '90px',
      form: {
        powerName: ''
      },
      menuId: [],
      checkVal: [
        {
          powerName: '账号管理',
          powerCode: '1'
        },
        {
          powerName: '商品管理',
          powerCode: '2'
        },
        {
          powerName: '订单管理',
          powerCode: '3'
        },
        {
          powerName: '角色管理',
          powerCode: '4'
        }
      ],
      powerListId: ''
    }
  },
  watch: {
    modifyPower(val) {
      if (val) {
        this.dialogFormVisible = true
        this.form.powerName = this.row.powerName
        this.menuId = this.row.powerId // 菜单Id
        this.powerListId = this.row.powerCode // 角色Id
      }
    }
  },
  methods: {
    close() {
      this.dialogFormVisible = false
      this.$emit('closeEdit') // 传导父组件关闭弹窗
    },
    powerMenuList() {
      // console.log(this)
    },
    submitEdit() {
      // console.log(this.menuId)
      var powerListName = []
      this.menuId.forEach(res => {
        this.checkVal.forEach(val => {
          if (res === val.powerCode) {
            powerListName.push(val.powerName)
          }
        })
      })
      const data = {
        powerName: this.form.powerName,
        powerArr: {
          menuId: this.menuId,
          menuName: powerListName
        },
        powerCode: this.powerListId
      }
      if (!allChinese(data.powerName)) {
        this.$message.error('权限名应为中文或字母组合')
      } else if (data.powerArr.menuId.length === 0) {
        this.$message.error('请选择权限菜单')
      } else {
        addPower(data).then(modifyRes => {
          if (modifyRes.resultCode === '0000') {
            console.log(modifyRes.data)
          }
        })
      }
    }
  }
}
</script>
